<template>
  <div class="nav">
    <div class="nav_header">
      <div class="header_left">
        <img src="@/images/bg.png" />
        <span class="left_text">新龙县基础管控平台</span>
      </div>
      <div class="header_right">
        <i class="el-icon-search"></i>
        <i class="el-icon-bell"></i>
        <img src="@/images/bg.png" alt="" srcset="" />
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="clearfix">
              评论
              <el-badge class="mark" :value="12" />
            </el-dropdown-item>
            <el-dropdown-item class="clearfix">
              回复
              <el-badge class="mark" :value="3" />
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="nav_list">
      <router-link v-for="(item, index) of list" :key="index" :to="item.url">
        <i :class="item.icon"></i>
        <span>{{ item.text }}</span>
      </router-link>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: "el-icon-menu",
          text: "首页内容",
          url: "/home",
        },
        {
          icon: "el-icon-school",
          text: "寺庙列表",
          url: "/temple",
        },
        {
          icon: "el-icon-user",
          text: "人员详情",
          url: "/people",
        },
        {
          icon: "el-icon-box",
          text: "阵地控制",
          url: "/position",
        },
        {
          icon: "el-icon-aim",
          text: "缉枪治爆",
          url: "/made",
        },
        {
          icon: "el-icon-connection",
          text: "矛盾纠纷",
          url: "/contradiction",
        },
        {
          icon: "el-icon-edit",
          text: "警情信息",
          url: "/alert",
        },
        {
          icon: "el-icon-view",
          text: "视频监控",
          // url: '/video'
          url: "",
        },
        {
          icon: "el-icon-document",
          text: "治县控局",
          url: "/hong",
        },
        {
          icon: "el-icon-location-outline",
          text: "区域地图",
          // url: '/area'
          url: "",
        },
      ],
    };
  },
};
</script>


<style scoped>
.nav {
  width: 10rem;
  height: 6.770833rem /* 1300/192 */;
  background: url("../../images/bg.png");
  background-size: cover;
}
.nav_header {
  position: fixed;
  z-index: 1;
  color: #999ba4;
  background: rgba(0, 0, 0, 0.2);
  height: 0.333333rem /* 64/192 */;
  line-height: 0.333333rem /* 64/192 */;
  width: 10rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-family: "Microsoft YaHei, Microsoft YaHei-Normal";
}

.header_left {
  display: flex;
  align-items: center;
}

.header_left > img {
  width: 0.270833rem /* 52/192 */;
  height: 0.270833rem /* 52/192 */;
  border-radius: 50%;
  margin: 0 0.088542rem /* 17/192 */ 0 0.078125rem /* 15/192 */;
}
.left_text {
  width: 1.171875rem /* 225/192 */;
  font-size: 0.130208rem /* 25/192 */;
  font-family: "-apple-system, BlinkMacSystemFont", "PingFang SC", Helvetica,
    Tahoma, Arial, "Microsoft YaHei", "微软雅黑", "黑体", "Heiti", sans-serif,
    "SimSun", 宋体, serif, -apple-system, BlinkMacSystemFont, "PingFang SC",
    Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, 黑体, Heiti,
    sans-serif, SimSun, 宋体, serif-Normal;
  font-weight: Normal;
  color: #00ffff;
}

.header_right {
  display: flex;
  align-items: center;
  margin-right: 0.28125rem /* 54/192 */;
}

.header_right > i {
  margin-right: 0.15625rem /* 30/192 */;
}

.header_right > img {
  width: 0.15625rem /* 30/192 */;
  height: 0.15625rem /* 30/192 */;
  border-radius: 50%;
  margin-right: 0.052083rem /* 10/192 */;
}

.el-dropdown-link {
  font-size: 0.078125rem /* 15/192 */;
  color: #999ba4;
  cursor: pointer;
}

.nav_list {
  padding-top: 0.083333rem /* 16/192 */;
  color: #999ba4;
  height: 5.291667rem /* 1016/192 */;
  position: fixed;
  top: 0.333333rem /* 64/192 */;
  width: 1.083333rem /* 208/192 */;
  background: rgba(0, 0, 0, 0.2);
}

.nav_list > a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  font-size: 0.078125rem /* 15/192 */;
  color: #aaa;
  text-align: center;
  padding: 0.104167rem /* 20/192 */ 0;
}

.nav_list > a > i {
  margin-right: 0.104167rem /* 20/192 */;
}

.nav_list > a > span {
  font-size: 0.09375rem /* 18/192 */;
}

.content {
  text-align: center;
  color: #999ba4;
  position: absolute;
  left: 1.083333rem /* 208/192 */;
}
</style>